<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2509195_fgiacagaiqp.css">

    <style type="text/css"></style>
    <title>Document</title>
</head>

<body>
    <div class="container">
        <ul class="rotation clear_fix">
            <!-- <li><img src="img/Genshin (11).JPG" alt=""></li> -->
            <li><img src="img/Genshin (1).JPG" alt=""></li>
            <li><img src="img/Genshin (2).JPG" alt=""></li>
            <li><img src="img/Genshin (3).JPG" alt=""></li>
            <li><img src="img/Genshin (4).JPG" alt=""></li>
            <li><img src="img/Genshin (5).JPG" alt=""></li>
            <li><img src="img/Genshin (6).JPG" alt=""></li>
            <li><img src="img/Genshin (7).JPG" alt=""></li>
            <li><img src="img/Genshin (8).JPG" alt=""></li>
            <li><img src="img/Genshin (9).JPG" alt=""></li>
            <li><img src="img/Genshin (10).JPG" alt=""></li>
            <li><img src="img/Genshin (11).JPG" alt=""></li>
            <!-- <li><img src="img/Genshin (1).JPG" alt=""></li> -->
        </ul>
        <div class="pre btn iconfont icon-fanhui"></div>
        <div class="next btn iconfont icon-gengduo"></div>
        <ul class="nav">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script type="text/javascript" src="js/tools.js"></script>
    <script>
        const ul = document.querySelector('.rotation')
        const lis=document.querySelectorAll('.rotation li')
        const moveWidth=parseFloat(css(lis[0],'width'))//css函数为tools.js种封装的获取外部样式的函数
        const navItems=document.querySelectorAll('.nav li')
        const btns=document.querySelectorAll('.container .btn')
        let _left = parseFloat(css(ul, 'left'))
        let index=0
        //底部按钮样式跟随函数
        function moveIndex(list,index){
            for(let i=0;i<list.length;i++){
                if(list[i].className=='active'){
                    list[i].className=''
                }
            }
            list[index].className='active'
        }
        function change(){
            index+=1
            if(index===lis.length){
                index=0
            }
            _left=-index*moveWidth
            moveIndex(navItems,index)
            animate(ul,{left:_left},200)//tools.js中封装的animate函数
        }
        //自动播放函数
        let timer=null
        function autoPlay(){
            timer = setInterval(change, 3000)
        }
        autoPlay()
        document.querySelector('.container').addEventListener('mouseenter',function(e){
            clearInterval(timer)
            btns.forEach(function(items){
                items.style.display='block'
            })
        },false)
        document.querySelector('.container').addEventListener('mouseleave',function(e){
            timer = setInterval(change, 3000)
            btns.forEach(function(items){
                items.style.display='none'
            })
        },false)
        document.querySelector('.next').addEventListener('click',function(e){
            change()
        },false)
        document.querySelector('.pre').addEventListener('click',function(e){
            index-=1
            if(index<0){
                index=lis.length-1
            }
            _left=-index*moveWidth
            moveIndex(navItems,index)
            animate(ul,{left:_left},200)
            console.log(index);
        },false)
        document.querySelector('.container .nav').addEventListener('click',function(e){
            if(e.target.nodeName==='LI'){
                index=Array.from(navItems).findIndex(function(curr){
                    return curr===e.target
                })
                index=index-1
                change()
            }
        },false)
    </script>
</body>

</html>